<template>
    <button @click="obj.count++">增加{{obj.count}}</button>
    <button @click="y.count++">增加{{y.count}}</button>
</template>

<script setup>
import { ref, watch, reactive } from 'vue'

const x = ref(0)
const y = ref({
    count: 0
})
// 1.侦听ref直接把ref定义的x写在上面即可
watch(x, (newX) => {
    console.log(`x is ${newX}`)
})

// 【区别】
// 侦听(ref)y对象的时候，y.count发生了变化(y的属性发生了变化)，如果没有deep: true，则不会被侦听到(不会进入watch方法)
// 侦听(ref)y对象的时候，y.count发生了变化(y的属性发生了变化)，如果有deep: true，  则会被侦听到(会进入watch方法)
watch(y,(newY) => {
    debugger
    console.log(`y is ${newY}`)
    console.log(`y.count is ${newY.count}`)
},
    {deep: true}
)

// 【区别】直接侦听ref的属性是可以的，不用开deep:true
// watch(() => y.value.count,(newY) => {
//     console.log(`y.count is ${newY}`)
// })


// 2.侦听reactive的属性,需要使用箭头函数() => obj.count
const obj = reactive({ count: 0 })

// 这里需要用一个返回该属性的 getter 函数：
// 提供一个 getter 函数
// obj.count变化时，调用方法
// watch(
//     () => obj.count,
//     (count) => {
//         console.log(`count is: ${count}`)
//     }
// )

// 【区别】
// 侦听(reactive)obj对象的时候，obj.count发生了变化(obj的属性发生了变化)，默认开启了deep: true，会被侦听到(不会进入watch方法)
watch(obj,(newObj) => {
    debugger
    console.log(`obj.count is ${newObj.count}`)
})


</script>